<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      font-size: 16px;
      box-sizing: border-box;
    }

    .head {
      border: 1px solid black;
      width: 1000px;
      text-align: center;
    }

    .out {
      border-collapse: collapse;
      width: 1000px;
      font-size: 0;
    }

    .out div {
      vertical-align: top;
    }

    .base div {
      width: 202.5px;
      border: 1px solid black;
      margin: 0;
      padding: 0;
    }

    .study div {
      width: 270px;
      border: 1px solid black
    }

    .item div {
      width: 405px;
      height: 92px;
      border: 1px solid black;
      margin: 0;
      padding: 0px;
    }

    .project div {
      width: 405px;
      border: 1px solid black;
      margin: 0;
      padding: 0;
    }

    .person div {
      width: 202.5px;
      height: 25.2px;
      border: 1px solid black;
      margin: 0;
      padding: 0;
    }

    .photo {
      width: 190px;
      height: 176px;
      text-align: center;
      line-height: 176px;
      border: 1px solid black;
    }

    .onphoto {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: 1;

    }

    .onphoto .bg {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      background-color: #000;
      opacity: 0.5;
      z-index: 3;
    }

    .onphoto img {
      position: relative;
      top: 50%;
      margin-top: -250px;
      z-index: 3;
      width: 700px;
      height: 500px;
    }

    .family {
      width: 190px;
      height: 72.5px;
      background-color: #dcdcdc;
      text-align: center;
      line-height: 72.5px;
      border: 1px solid black;
    }

    .work {
      width: 190px;
      height: 98.5px;
      background-color: #dcdcdc;
      text-align: center;
      line-height: 98.5px;
      border: 1px solid black;
    }

    .education {
      width: 190px;
      height: 48px;
      background-color: #dcdcdc;
      text-align: center;
      line-height: 48px;
      border: 1px solid black;
    }

    .train {
      width: 190px;
      height: 47.5px;
      background-color: #dcdcdc;
      text-align: center;
      line-height: 47.5px;
      border: 1px solid black;
    }

    .prj {
      width: 190px;
      height: 275.5px;
      background-color: #dcdcdc;
      text-align: center;
      line-height: 275.5px;
      border: 1px solid black;
    }

    img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
      cursor: pointer;
    }


    .background {
      background-color: #dcdcdc;
    }

    .style {
      width: 404px;
      height: 70px;
    }
  </style>
</head>

<body>

  <div class="head">
    <h1>个人简历</h1>
  </div>
  <div class="out" id="#out">
    <div style="display: inline-block;" class="person">
      <div class="background">姓名</div>
      <div class="background">年龄</div>
      <div class="background">所在城市</div>
      <div class="background">学历</div>
      <div class="background">婚姻状况</div>
      <div class="background">籍贯</div>
      <div class="background">毕业学校</div>
    </div>
    <div style="display: inline-block;" class="base">
      <div><input type="text" class="uname"></div>
      <div><input type="text" class="age"></div>
      <div><input type="text" class="city"></div>
      <div><input type="text" class="input"></div>
      <div><input type="text" class="input"></div>
      <div><input type="text" class="input"></div>
      <div><input type="text" class="input"></div>
    </div>
    <div style="display: inline-block;" class="person">
      <div class="background">性别</div>
      <div class="background">出生日期</div>
      <div class="background">从事行业</div>
      <div class="background">民族</div>
      <div class="background">身份证</div>
      <div class="background">户口所在地</div>
      <div class="background">计算机能力</div>
    </div>
    <div style="display: inline-block;" class="base">
      <div><input type="text" class="gender"></div>
      <div><input type="text" class="birth"></div>
      <div><input type="text" class="did"></div>
      <div><input type="text" class="input"></div>
      <div><input type="text" class="input"></div>
      <div><input type="text" class="input"></div>
      <div><input type="text" class="input"></div>
    </div>
    <div style="display: inline-block;" class="photo">
      <div class="bg"></div>
      <img src="../images/sd.jpg">
    </div>
  </div>
  <div class="out">
    <div style="display: inline-block;" class="family">家庭成员</div>
    <div style="display: inline-block;" class="base">
      <div class="background">姓名</div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
    <div style="display: inline-block;" class="base">
      <div class="background">成员关系</div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
    <div style="display: inline-block;" class="base">
      <div class="background">职务</div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
    <div style="display: inline-block;" class="base">
      <div class="background">工作单位</div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </div>
  <div class="out">
    <div style="display: inline-block;" class="work">工作经历</div>
    <div style="display: inline-block;" class="base">
      <div class="background">工作时间</div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
    <div style="display: inline-block;" class="base">
      <div class="background">公司名称</div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
    <div style="display: inline-block;" class="base">
      <div class="background">职位名称</div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
    <div style="display: inline-block;" class="base">
      <div class="background">所属部门</div>
      <div><input type="text"></div>
      <div><input type="text"></div>
      <div><input type="text"></div>
    </div>
  </div>
  </div>
  </div>
  <div class="out">
    <div style="display: inline-block;" class="education">教育情况</div>
    <div style="display: inline-block;" class="study">
      <div class="background">时间</div>
      <div><input type="text" size="40"></div>
    </div>
    <div style="display: inline-block;" class="study">
      <div class="background">学校</div>
      <div><input type="text" size="40"></div>
    </div>
    <div style="display: inline-block;" class="study">
      <div class="background">学历</div>
      <div><input type="text" size="28"></div>
    </div>
  </div>
  <div class="out">
    <div style="display: inline-block;" class="train">培训经历</div>
    <div style="display: inline-block;" class="study">
      <div class="background">培训时间</div>
      <div><input type="text" size="40"></div>
    </div>
    <div style="display: inline-block;" class="study">
      <div class="background">培训机构</div>
      <div><input type="text" size="40"></div>
    </div>
    <div style="display: inline-block;" class="study">
      <div class="background">培训内容</div>
      <div><input type="text" size="28"></div>
    </div>
  </div>
  <div class="out">
    <div style="display: inline-block;" class="prj">项目经验</div>
    <div style="display: inline-block;" class="item">
      <div>项目:<br><textarea class="style"></textarea></div>
      <div>开发:<br><textarea class="style"></textarea></div>
      <div>其他项目:<br><textarea class="style"></textarea></div>
    </div>
    <div style="display: inline-block;" class="project">
      <div>1、<input type="text" size="42"></div>
      <div>2、<input type="text" size="42"></div>
      <div>3、<input type="text" size="42"></div>
      <div>4、<input type="text" size="42"></div>
      <div>5、<input type="text" size="42"></div>
      <div>6、<input type="text" size="42"></div>
      <div>7、<input type="text" size="42"></div>
      <div>注：<input type="text" size="41"></div>
      <div>8、<input type="text" size="42"></div>
      <div>9、<input type="text" size="42"></div>
      <div>10、<input type="text" size="40"></div>
    </div>
  </div>
  <button type="button" class="btn">保存到本地</button>
  <button type="button" class="btn1">提取数据</button>
  <button type="button"><a href="todolist.html" style="text-decoration: none;">TODOLIST</a></button>
  <script>
    function localStorageSet(key, value) {
      localStorage.setItem(key, JSON.stringify(value))
    }

    function localStorageGet(key) {
      const data = JSON.parse(localStorage.getItem(key))
      return data;
    }

    //1、获取输入内容
    const uname = document.querySelector(".base .uname")
    const age = document.querySelector(".base .age")
    const city = document.querySelector(".base .city")
    const gender = document.querySelector(".base .gender")
    const birth = document.querySelector(".base .birth")
    const did = document.querySelector(".base .did")
    const btn = document.querySelector(".btn")
    const btn1 = document.querySelector(".btn1")


    //2、保存获取的内容
    btn.addEventListener("click", function () {
      localStorageSet("uname", uname.value);
      localStorageSet("age", age.value);
      localStorageSet("city", city.value);
      localStorageSet("gender", gender.value);
      localStorageSet("birth", birth.value);
      localStorageSet("did", did.value);
    })
    btn1.addEventListener("click", function () {
      uname.value = localStorageGet("uname");
      // uname.value = localStorage.getItem("uname");
      age.value = localStorageGet("age");
      city.value = localStorageGet("city");
      gender.value = localStorageGet("gender");
      birth.value = localStorageGet("birth");
      did.value = localStorageGet("did");
    })

    // 1、获取元素
    const img = document.querySelector(".out .photo")
    const photo = img.cloneNode(true)
    //2、当点击图片时，图片放大，添加onphoto类
    img.addEventListener("click", function () {
      // console.log(111);
      //排他思想

      // console.log(photo);

      photo.classList.add("onphoto")
      document.documentElement.appendChild(photo)
    })
    photo.addEventListener("click", function () {
      const on = document.querySelector(".onphoto")
      document.documentElement.removeChild(on)
    })
  </script>
</body>

</html>